<template>
  <div class="app-container">

		<div class="filter-container">

      <el-upload
        class="upload-demo "
        action="/guard/user/uploadUser"
        accept=".xls,.xlsx"
        :on-success="uploadSuccess"
        >
        <el-button size="small" type="primary" class="filter-item">导入用户</el-button>
      </el-upload>


			<el-input  style="width: 200px;"   v-model="query.realName" placeholder="真实姓名" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.phone" placeholder="电话" class="filter-item"  ></el-input>

			<!-- <el-select v-model="type" class="filter-item"  placeholder="请选择">
					<el-option
					v-for="item in mapType"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
			</el-select> -->



			<el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
			<el-button @click="getRecords" type="primary" class="filter-item">刷新</el-button>
<!--			<el-button @click="openAddDialog" type="primary" class="filter-item">添加</el-button>-->
		</div>

		<el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              v-horizontal-scroll="'always'"
    >
			<!-- <el-table-column type="selection" width="55" /> -->
			<!-- <el-table-column type="index" label="序列" width="50" /> -->
			<el-table-column prop="id" label="ID" width="50" />
			<el-table-column prop="type_name" label="身份" width="80" />
			<el-table-column prop="avatar" label="头像" width="80" >
					<template slot-scope="scope">
						<img v-if="scope.row.avatar" class="table-img" :src="scope.row.avatar">
					</template>
			</el-table-column>
			<el-table-column prop="wx_nickname" label="昵称" width="120" />
			<el-table-column prop="real_name" label="姓名" width="120" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="car_number" label="车牌号" width="180" />
      <el-table-column prop="car_jia_number" label="车架号" width="180" />
			<el-table-column prop="age" label="年龄" width="80" />
<!--			<el-table-column prop="gender" label="性别" width="80" />-->
			<el-table-column show-overflow-tooltip prop="beizhu" label="备注" width="300" />
			<el-table-column prop="created_at" label="创建时间" width="160" />
			<el-table-column prop="status" label="启用/禁用" width="100" >
				<template slot-scope="scope">
						<el-switch	v-model="scope.row.status"	active-color="#409EFF"	inactive-color="#909399"
							:active-value="1"	:inactive-value="2"		@change="changeStatus(scope.row)">
						</el-switch>
				</template>
		</el-table-column>
			<el-table-column fixed="right" label="操作" width="130">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'添加':'编辑'"  :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px"   v-loading="formLoading" >
        <el-form-item label="姓名" >
          <el-input v-model="form.real_name"></el-input>
        </el-form-item>

        <el-form-item label="身份证" >
          <el-input v-model="form.id_card"></el-input>
        </el-form-item>
        <el-form-item label="手机" >
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
<!--        <el-form-item label="性别" >
          <el-radio v-model="form.gender" label="男">男</el-radio>
          <el-radio v-model="form.gender" label="女">女</el-radio>
        </el-form-item>-->
        <el-form-item label="类型" >
          <el-radio v-model="form.type" label="1">普通用户</el-radio>
          <el-radio v-model="form.type" label="2">修理厂</el-radio>
          <el-radio v-model="form.type" label="3">普通用户及修理厂</el-radio>
        </el-form-item>

        <el-form-item label="备注">
          <el-input :rows="3" type="textarea" v-model="form.beizhu"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="onSubmit('form')">{{isAdd?'添加':'修改'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'

const urlUserLst = '/guard/user/lst';
const urlAdd = '/guard/user/add';
const urlDetail = '/guard/user/detail';
const urlDel = '/guard/user/del';

export default {

    data() {
        return {
					query:{
						realName:'',
						phone:'',
					},
          form:{
					  real_name:'',
            id_card:'',
            phone:'',
            gender:'男',
            age:20,
            beizhu:'',
            type:"1",
          },

          host:process.env.VUE_APP_HOST,
          isAdd:true,
					dialogFormVisible:false,
					list: [],
					formLoading:false,
					listLoading: true,
          pagination:{
            total:0,
            page:1,
            pageSize:20,
          },
        }
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.formLoading = true;
            myPost(urlAdd,this.form).then(res=>{
              this.formLoading = false;
              if(res.status){
                this.dialogFormVisible = false
                Object.assign(this.form,this.$options.data().form)
                this.$message.success(res.msg);
                this.reload();
              }
            })
          } else {
            //this.$message.error('验证失败！');
            return false;
          }
        });
      },
      openAddDialog(){
        Object.assign(this.form,this.$options.data().form);
        this.dialogFormVisible = true
      },
      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },
			getRecords(){
        this.listLoading = true;
        let params = Object.assign(this.query,this.pagination)
					myGet(urlUserLst,params).then((res) =>{
            this.listLoading = false;
            if(res.status){
              this.list = res.data.records
              this.pagination.total = res.data.total
            }
          })
			},
			changeStatus(row){
        myPost(urlAdd,{id:row.id, status:row.status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
          }
        })
			},
			handleEdit(index, row) {
				const id = row.id
        myGet(urlDetail,{id}).then(res=>{
          if(res.status){
            Object.assign(this.form,res.data.records[0]);
            this.form.type +=""
            this.dialogFormVisible = true
          }
        })
			},
			handleDelete(index, row) {
					this.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
            let ids = row.id
            myGet(urlDel, { ids }).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
                this.reload();
              }
            })
          })
			},
      uploadSuccess(res, file, fileList){
        if(res.status){
          this.$message.success(res.msg)
          this.reload()
        }
      },

			handleSizeChange(val) {
					this.pagination.pageSize = val
					this.pagination.page = 1
					this.getRecords()
			},
			handleCurrentChange(val) {
					this.pagination.page = val
					this.getRecords();
			},
			//多选
			toggleSelection(rows) {
					if (rows) {
					rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
					});
					} else {
							this.$refs.multipleTable.clearSelection();
					}
			}
    },
    mounted() {
        this.getRecords()
    }
}
</script>

<style>

.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>


